<script setup>
import { Handle, Position, useVueFlow } from '@vue-flow/core'
import { colors } from './presets.js'

const props = defineProps({
  id: {
    type: String,
    required: true,
  },
})

const { updateNodeData } = useVueFlow()

function onSelect(color) {
  updateNodeData(props.id, { color, isGradient: false })
}

function onGradient() {
  updateNodeData(props.id, { isGradient: true })
}
</script>

<template>
  <div>Select a color</div>

  <div class="color-selector nodrag nopan">
    <button
      v-for="{ name: colorName, value: color } of colors"
      :key="colorName"
      :title="colorName"
      :style="{ backgroundColor: color }"
      type="button"
      @click="onSelect(color)"
    />

    <button class="animated-bg-gradient" title="gradient" type="button" @click="onGradient" />
  </div>

  <Handle id="a" type="source" :position="Position.Right" />
</template>

<style>
.custom-node-flow .vue-flow__edges{
  filter:invert(100%)
}

.custom-node-flow .vue-flow__node-color-selector{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:10px;
  border:1px solid #777;
  border-radius:10px;
  background:whitesmoke;
  gap:10px;
  max-inline-size:250px
}

.custom-node-flow .vue-flow__node-color-selector .color-selector{
  display:flex;flex-flow:row wrap;justify-content:center;
  margin:auto;gap:4px;max-inline-size:90%
}

.custom-node-flow .vue-flow__node-color-selector .color-selector button{
  padding:5px;border:1px solid #777;
  border-radius:25px;block-size:25px;cursor:pointer;inline-size:25px
}

.custom-node-flow .vue-flow__node-color-selector .color-selector button:hover{
  box-shadow:0 5px 10px 0 rgba(0,0,0,50%);box-shadow:0 5px 10px #00000080;
  transform:scale(105%);transition:.25s all ease
}

.animated-bg-gradient{
  animation:gradient 4s ease infinite;
  background:linear-gradient(122deg,#6f3381,#81c7d4,#fedfe1,#fffffb);
  background-size:800% 800%}

@keyframes gradient{0%{background-position:0% 22%}50%{background-position:100% 79%}100%{background-position:0% 22%}}

@keyframes gradient{0%{background-position:0% 22%}50%{background-position:100% 79%}100%{background-position:0% 22%}}

@keyframes gradient{0%{background-position:0% 22%}50%{background-position:100% 79%}100%{background-position:0% 22%}}


</style>
